<template>
  <div class="userDialog">
    <el-dialog
      :title="dialogTitle"
      :visible="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form :model="userForm" :rules="userFormRules" ref="addUserRulesForm">
        <el-form-item label="unid" prop="unid">
          <el-input v-model="userForm.unid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vip等级" prop="vipLevel">
          <el-input v-model="userForm.vipLevel" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="confirmClick('addUserRulesForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/user"
import { mapState, mapMutations } from "vuex";
export default {
  created(){
      this.oldUserForm={...this.userForm}
  },
  data() {
    return {
      userForm: {
        unid: "",
        username: "",
        nickname: "",
        vipLevel: "",
      },
      oldUserForm: {},//用于存储userForm的初始值，便于之后赋值给userForm使得userForm清空
      userFormRules: {
        unid: [{ required: true, message: "请输入unid", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        vipLevel: [
          { required: true, message: "请输入VIP等级", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState(["dialogTitle", "dialogFormVisible","currentUserRow"]),
  },
  methods: {
    ...mapMutations(["HIDE_DIALOG"]),
    hideDialog(){
        this.HIDE_DIALOG()
    },
    closeDialog(){
        this.HIDE_DIALOG()
    },
    confirmClick(formName){
        this.$refs[formName].validate((valid)=>{
            console.log(valid);
            if(valid){
                //调用修改用户的接口，发起请求
                let data={}
                data.unid=this.currentUserRow.unid
                api.updateUser(data)
                .then(res=>{
                    console.log(res);
                })
            }
        })
    }
  },
  watch: {
      currentUserRow(newVal){
          this.userForm=this.currentUserRow
      }
  }
};
</script>